<template>
  <div class="boss">
    <Serch></Serch>
    <Nav></Nav> 
    <Banner></Banner>
    <chamber></chamber>
   
 <h3>公告</h3>
  <!-- 各省商会的总区域  -->
<div class="eveny">
     <div class="center"> 
       <!-- 各省的关注  -->
    <div class="guan">{{this.$route.query.id}}商会公告</div>
    <!-- 省会内容总区域  -->
       <div class="shenghui">
        <!-- 省会区域 -->
   <div class="small" v-for="(item,index) in address" :key="index" @click="notdetails(item.noticeTitle)">
  <!-- 原点区域 -->
  <div class="left">
    <div class="yuan"></div>
  </div>
  <!-- 内容区域 -->
  <div class="right">
  {{item.noticeTitle}}
  </div>
       </div>
</div>
  </div>
    </div>
 
</div>
</template>

<script>
import Serch from "../SearchView.vue"
import  Nav from "../NavView.vue"
import Banner from "@/components/Home/BannerView.vue"
import chamber from "@/components/Home/CommCe.vue"   
import {NoticeAddress} from "@/api/index"
export default {
  data(){
   return {
  address:[]
}
  },
   components:{
  Serch,Nav ,Banner,chamber
   },
   //各省会发送请求的
  mounted(){
    NoticeAddress(this.$route.query.id).then((res)=>{
    if(res.data.code==200){
      // console.log(res);
      this.address=res.data.rows
    }
    
      
    })
  },
  methods:{
    //标题跳公告详情
    notdetails(i){
    // console.log(i);
  this.$router.push({path:"/notdetails",query:{i}})
    }
  }
}
</script>

<style scoped>
  /* 大盒子区域 */
  .boss{
    width: 100%;
    height: 100%;
    padding-bottom: .55rem;
    background-color: #f0eff5;
  }
 h3{
  height: .4rem;
   font-size: 30px;
   color: #5c5d7b;
   line-height: .4rem;
   padding-left: .15rem;
   
 }
  /* 各省商会的总区域 */
  .eveny{
    min-height: .5rem;
    display: flex;
    justify-content: center;
  
  }
  /* 版心区域 */
  .center{
    width: 95%;
   background-color: white;
   border-radius: .1rem;
  }
  /* 关注各省的标题 */
  .guan{
    height: .4rem;
    text-align: center;
    line-height: .4rem;
    font-size: 20px;

  }
  /* 省会总区域 */
  .shenghui{
    width: 100%;
   
 }
 /* 省会区域 */
 .small{
  width: 100%;
  height: .2rem;
  display: flex;
  margin-bottom: .07rem;

 }
 /* 原点区域 */
 .left{
  width: 5.5%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: .1rem;
 
 }
 .yuan{
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: black;
 }
 /* 内容区域 */
 .right{
  width: 94%;
  height: 100%;
 padding-left: .05rem; 
 font-weight: 700;
 }
</style>